<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百度一下，你就知道</title>
        <link href="附件/style.css" type="text/css" rel="stylesheet" />
        <script src="附件/index.js"></script>
    </head>
    <body>
        <div class="web-outer">
            <div id="head">
                <div id="top-left">
                    <a href="http://news.baidu.com/" target="_blank">新闻</a>
                    <a href="https://www.hao123.com" target="_blank">hao123</a>
                    <a href="http://map.baidu.com" target="_blank">地图</a>
                    <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
                    <a href="https://haokan.baidu.com/" target="_blank">视频</a>
                    <a href="http://image.baidu.com/" target="_blank">图片</a>
                    <a href="https://pan.baidu.com/" target="_blank">网盘</a>
                </div>
                <div id="top-right">
                    <div id="top-login-btn">登录</div>
                </div>
            </div>
            <div id="outer-mid">
                <div id="mid">
                    <div id="logo-outer">
                        <figure id="logo" title="点击一下，了解更多"></figure>
                    </div>
                    <div id="search-div">
                        <div id="search-input">
                            <input>
                            <div id="search-btn">百度一下</div>
                        </div>
                    </div>
                    <div id="hot-title">
                        <img src="./img/game.png" style="height: 20px; position: relative; top: 3px;">
                        <span style="color: dodgerblue; font-size: 18px; line-height: 24px;">热榜之21373458分榜</span>
                        <!-- <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" style="color: #9195a3; margin-left: 30px; text-decoration: none;" target="_blank">更多 ></a> --> <!-- 任务3只修改index.html -->
                        <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank">更多 ></a>
                    </div>
                    <ul id="hot">
                        <!-- <li>
                            <span class="hot-order hot-order-1">1</span><span class="hot-content">沙伊两国在北京握手言和</span><span class="hot-tag hot">热</span>
                        </li>
                        <li>
                            <span class="hot-order">4</span><span class="hot-content">TES主教练暂离赛场</span>
                        </li> -->
                        <!-- TODO: 完成剩余部分的代码 -->
                        <li class="first">
                            <!-- <span class="hot-order hot-order-1">1</span><span class="hot-content">原神</span>
                            <span style="float: right;">
                                <span class="num">324853</span>
                                <img src="./img/up.png" class="pic">
                            </span> -->
                            <img src="./img/genshin.jpg" class="hot-pic">
                            <span class="tag">1</span>
                            <div class="hot-info">
                                <span class="hot-content">原神</span>
                                <span class="hot-content">
                                    <span class="hot-num">热搜指数：324853</span>
                                    <img src="./img/up.png" class="pic">
                                </span>
                                <span class="type">手机游戏</span>
                            </div>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order hot-order-2">2</span><span class="hot-content">香肠派对</span>
                            <span style="float: right;">
                                <span class="num">168931</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order hot-order-3">3</span><span class="hot-content">王者荣耀</span>
                            <span style="float: right;">
                                <span class="num">161167</span>
                                <img src="./img/heng.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">4</span><span class="hot-content">我的世界</span>
                            <span style="float: right;">
                                <span class="num">127320</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">5</span><span class="hot-content">和平精英</span>
                            <span style="float: right;">
                                <span class="num">123379</span>
                                <img src="./img/heng.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">6</span><span class="hot-content">植物大战僵尸</span>
                            <span style="float: right;">
                                <span class="num">88496</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">7</span><span class="hot-content">迷你世界</span>
                            <span style="float: right;">
                                <span class="num">79547</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">8</span><span class="hot-content">光遇</span>
                            <span style="float: right;">
                                <span class="num">76194</span>
                                <img src="./img/heng.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">9</span><span class="hot-content">泰拉瑞亚</span>
                            <span style="float: right;">
                                <span class="num">54000</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                        <li>
                            <span class="hot-order">10</span><span class="hot-content">绝地求生</span>
                            <span style="float: right;">
                                <span class="num">49095</span>
                                <img src="./img/up.png" class="pic">
                            </span>
                        </li>
                        <br>
                    </ul>
                </div>
            </div>
            <div id="footer">本网页仅用于软工实验使用</div>
            <!-- 引入核心代码，请不要修改 -->
            <script src="code/index.js"></script>
        </div>
        <style>
            #logo{
                background-image: url('./img/logo.png');
            }
            .num{
                color: #9195a3;
                font-size: 14px;
            }
            .pic{
                position: relative;
                bottom: -3px;
                height: 18px;
            }
        </style>
    </body>
</html>